// import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import './App.less'
import Bundle from './loadable'
const About = Bundle(() => import('./components/about'))
const Home = Bundle(() => import('./components/home'))
const Movie = Bundle(() => import('./components/movie'))
const { Header } = Layout;

class App extends React.Component {
  render() {
    return <HashRouter>
      <Layout style={{ height: '100%' }}>
        
        <Header className="header">
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[window.location.hash.split('/')[1]]}>
            <Menu.Item key="home">
              <Link to="/home">首页</Link>
            </Menu.Item>
            <Menu.Item key="movie">
              <Link to="/movie/in_theaters/1">电影</Link>
            </Menu.Item>
            <Menu.Item key="about">
              <Link to="/about">关于</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Layout className="main-layout">
          <Route path="/home" component={Home}/>
          <Route path="/movie" component={Movie}/>
          <Route path="/about" component={About}/>
        </Layout>

        <div style={{backgroundColor:'#E0E0E0',height:'60px',lineHeight:'60px',textAlign:'center'}}>
          2020仿豆瓣电影商城
        </div>
      </Layout>
    </HashRouter>

  }
}

export default App